<!-- HomeViewTwo.vue -->
<template>
  
  <div class="fullscreen-bg-page" :style="{ backgroundImage: `url(/images/${route.params.id}.jpg)` }"></div>
  <div class="content">
    <Header :title="title" :isWhite="true"></Header>
    <Cards :cardTitle="card.cardTitle" :cardContent="card.cardContent"></Cards>
    <div style="border-radius: 20px; overflow: hidden;">
      <Items v-for="item in items" :key="item.id" :item="item"></Items>
    </div>
  </div>

</template>
 
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import Header from "@/components/Header.vue";
import axios from 'axios' // 假设你使用 axios 进行 HTTP 请求
import Cards from '@/components/Cards.vue';
import Items from '@/components/Items.vue';
import { useUserStore } from '@/stores/userStore'
const userStore = useUserStore()

const route = useRoute()
const title = ref('')
const card = ref({
  cardTitle: '',
  cardContent: []
})
const items = ref([])
// const backgroundImage = `@/assets/${route.params.id}.jpg`
// console.log(backgroundImage)

onMounted(async () => {
  try {
    const response = await axios.get(
      // console.log('Current token:', localStorage.getItem('token'))
     `http://localhost:8080/lawKnowledge/getEnvironmentalData/${route.params.id}`,
     {
       headers: {
          token: ` ${localStorage.getItem('token')}`
        }
      }
    )
    const data = response.data.data

    title.value = data.name
    card.value.cardTitle = data.card.cardTitle
    card.value.cardContent = data.card.cardContent
    items.value = data.item
  } catch (error) {
    console.error('获取数据失败:', error)
  }
})

</script>

<style scoped>
.fullscreen-bg-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* background-image: url('backgroundImage'); */
  /* 图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  /* 确保内容在背景之上 */
  padding: 0;
  margin: 0;
}
.content {
  padding: 2em;
}
</style>